<template>
  <div>
    <div style="width: 500px;margin: 10px auto">
      <div>
        <img :src="dataList.storePhoto">
      </div>
      <div>{{ dataList.storeName }}</div>
      <div>{{ dataList.storeAddress }}</div>
      <div>
        请选择要预定的日期：
        <a-date-picker :default-value="moment(getLocalDateString())" @change=" reservationDateOnChange" />
      </div> {{ price }}
    </div>
    <div v-for="bathRoom in dataList.brInfoList" :key="bathRoom.id">
      <a-row type="flex" justify="space-around" style="margin: 20px 0">
        <a-col :span="16" style="border: 1px solid gray; padding:10px;border-radius: 10px">
          <div>
            <img :src="bathRoom.photo" width="100" style="padding: 10px">
          </div>
          <div style="height: 100px;float:left;margin-left: 10px">
            <div style="margin-top:5px;font-size: 18px;color:#ece815">
              {{ bathRoom.roomName }}
            </div>
            <div style="margin-top:40px">
              浴间当前状态:
              <a-tag v-if="bathRoom.roomState === 0" color="#42ea24">
                可预订
              </a-tag>
              <a-tag v-if="bathRoom.roomState === 1" color="#ead61f">
                清洁中
              </a-tag>
              <a-tag v-if="bathRoom.roomState === 2" color="#d51414">
                已预定
              </a-tag>
              <a-tag v-if="bathRoom.roomState === 3" color="#d51414">
                使用中
              </a-tag>
              <a-tag v-if="bathRoom.roomState === 4" color="#bfbfbf">
                故障
              </a-tag>
            </div>
          </div>

          <a-button type="primary" style="position: absolute; bottom: 10px;right: 10px" @click="sublim(bathRoom)">
            预约
          </a-button>
        </a-col>
      </a-row>
    </div>

    <a-modal
      :visible="formVisible"
      width="680px"
      title="信息"
      @ok="onOk"
      @cancel="handleCancel"
    >
      <a-form-model
        :label-col="{ span: 8 }" :wrapper-col="{ span: 10 }"
      >
        <a-form-model-item label="开始时间" required>
          <a-time-picker v-model="resrvationStartDateTime" format="HH:mm"
                         :minute-step="extraPackageTime"
                         @change="resrvationStartTimeOnChange"
          />
        </a-form-model-item>
        <a-form-model-item label="结束时间" required>
          <a-time-picker v-model="reservationEndDateTime" format="HH:mm"
                         :minute-step="extraPackageTime"
                         :disabled="timeDisabled"
                         @change="resrvationEndTimeOnChange"
          />
        </a-form-model-item>
        <a-form-model-item label="订单价格">
          <span v-show="form.price" style="font-size: 18px">￥{{ form.price }}</span>
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-textarea v-model="form.remark" rows="3" placeholder="" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { get } from '@/api/reservation/br-reservation-pre-query'
import { add } from '@/api/reservation/br-order-detail'
import moment from 'moment'

export default {
  name: 'BrReservation',
  data() {
    return {
      price: '',
      resrvationTime: '',
      reservationDate: moment().format('YYYY-MM-DD'),
      resrvationStartDateTime: '',
      resrvationStartTime: '',
      reservationEndDateTime: '',
      reservationEndTime: '',
      dataList: {},
      borderColor: '',
      roomStateMessage: '',
      form: {
        endTime: '',
        startTime: '',
        price: '',
        roomId: '',
        roomName: '',
        remark: ''
      },
      value: 1,
      formVisible: false,
      extraPackageTime: '',
      reservationCode: '',
      timeDisabled: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    moment,
    getLocalDateString() {
      const date = new Date()
      return date.toLocaleDateString()
    },
    getPrice() {
      this.form.startTime = this.reservationDate + ' ' + this.resrvationStartTime
      this.form.endTime = this.reservationDate + ' ' + this.reservationEndTime
      const date = new Date(this.form.startTime)
      const date1 = new Date(this.form.endTime)
      const subMillisecond = date1.getTime() - date.getTime()
      const price = this.dataList.extraPackagePrice * (subMillisecond / (60000 * (this.dataList.extraPackageTime[1])))
      const price1 = this.dataList.startPrice + price
      console.log(this.form.startTime)
      console.log(this.form.endTime)
      this.form.price = price1
    },
    init() {
      get().then(res => {
        this.dataList = res.data
        console.log(this.dataList)
        this.extraPackageTime = this.dataList.extraPackageTime[1]
      })
    },
    sublim(val) {
      // add(this.form)
      this.formVisible = true
      this.form.roomId = val.id
      this.form.roomName = val.roomName
    },
    onOk() {
      if (!this.form.startTime && !this.form.endTime) {
        this.$message.warning('开始时间和结束时间不能为空！')
        return
      }
      this.form.startTime = moment(this.form.startTime).valueOf()
      this.form.endTime = moment(this.form.endTime).valueOf()
      add(this.form).then(res => {
        console.log(res)
        this.reservationCode = res.data.reservationCode
        this.formVisible = false
        this.$success({
          title: '预定成功',
          // JSX support
          content: (
            <div style="padding-top:20px;width:80%;text-align:center">
              <p style="font-size: 18px">预定码:</p>
              <p style="font-size: 28px">{ this.reservationCode }</p>
            </div>
          )
        })
        this.empty()
      })
    },
    handleCancel() {
      this.formVisible = false
      this.empty()
    },
    reservationDateOnChange(date, dateString) {
      console.log(date)
      console.log(dateString)
      this.reservationDate = dateString
    },
    resrvationStartTimeOnChange(date, dateString) {
      this.resrvationStartTime = dateString
      this.timeDisabled = false
    },
    resrvationEndTimeOnChange(date, dateString) {
      this.reservationEndTime = dateString
      this.getPrice()
    },
    empty() {
      let i
      for (i in this.form) {
        this.form[i] = ''
      }
      this.resrvationStartTime = ''
      this.reservationEndTime = ''
      this.reservationEndDateTime = ''
      this.resrvationStartDateTime = ''
      this.timeDisabled = true
    }
  }
}
</script>

<style scoped>
.ant-modal-confirm .ant-modal-confirm-btns {
   margin-top: 0;
}
</style>
